<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #app-model{
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 360px;
      height: 640px;
      padding: 25px 6px;
      border-radius: 20px;
      background-color: #000;
    }
    .app-wrap{
      box-sizing: border-box;
      padding: 20px 6px;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      background-color: #fff;
    }
    .app-wrap:before, .app-wrap:after{
      content: '';
      display: table;
    }
    .app-wrap:after{
      clear: both;
    }
    .app-wrap h3{
      text-align: center;
    }
  </style>
</head>
<body>
<div id="main">
  <div id="pc-model">
    <h3 id="pc-title"></h3>
    <div id="pc-content"></div>
  </div>
  <div id="app-model">
    <div class="app-wrap">
      <h3 id="app-title">
      </h3>
      <div id="app-content"></div>
    </div>
  </div>
</div>
<script>
  function switchAppPc (type) {
    let app = document.getElementById('app-model')
    let pc = document.getElementById('pc-model')
    if (type === 'APP') {
      app.style.display = 'block';
      pc.style.display = 'none';
    } else if (type === 'PC') {
      pc.style.display = 'block';
      app.style.display = 'none';
    }
  }
  var previewText = window.localStorage.getItem('previewText') || '';
  window.localStorage.removeItem('previewText');
  if (previewText) {
    var previewObj = JSON.parse(previewText)
    if (previewObj.type === 'affiche') {
      renderAffiche(previewObj.data)
    } else if (previewObj.type === 'news') {
      renderNews(previewObj.data)
    } else if (previewObj.type === 'lesson') {
      renderLesson(previewObj.data)
    }
  }
  function renderAffiche (data) {
  }
  function renderNews (data) {
    let type = data.location;
    let titleDom = document.getElementById(type.toLowerCase() + '-title');
    let contentDom = document.getElementById(type.toLowerCase() + '-content');
    switchAppPc(type);
    titleDom.innerHTML = data.title;
    contentDom.innerHTML = data.content;
  }
  function renderLesson (data) {
  }
</script>
</body>
</html>
